<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <!--使用 v-cloak 能够解决 插值表达式闪烁的问题-->
        <p v-cloak>------------ {{ msg }} +++++++++++++++++++</p>
        <h4 v-text="msg"></h4>
        <!--默认使用 v-text 是没有闪烁问题的-->
        <!--
        v-text 会覆盖元素中原本的内容，但是
        插值表达式 只会替换自己的这个占位符，
        不会把整个元素的内容清空
        -->

        <div>{{ msg2 }}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>

        <hr>
        <input type="button" value="点一下试试吧" v-on:click="aa">
        
    </div>
</body>
<script src="../lib/vue-2.6.10.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '真好',
            msg2: '<h2>今天可是真好</h2>'
        },
        methods: {
            aa:function(){
                alert('你好');
            }
        },
    })
</script>

</html>